﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <link href="../themes/metro/easyui.css" rel="stylesheet" />
    <link href="../themes/icon.css" rel="stylesheet" />
    <script src="../scripts/jquery.min.js"></script>
    <script src="../scripts/jquery.easyui.min.js"></script>
	<meta charset="utf-8" />
    <script>
        $(function () {
            $('#dg').datagrid({
                url: '/jQuery-easyUI-1.4.3/demo/datagrid/datagrid_data1.json',
                fitColumns:true,
                method: "get",
                toolbar: "#tb",
                rownumbers: true,//如果为true，则显示一个行号列
                pagination: true,//如果为true，则在DataGrid控件底部显示分页工具栏。
                singleSelect: true,//如果为true，则只允许选择一行。
                columns: [[
                    { field: 'productid', title: '产品编号', width: 100 },
                    { field: 'productname', title: '产品名称', width: 100 },
                    { field: 'unitcost', title: '费用', width: 100, align: 'right' }
                ]]
            });
            $(".add").click(function () {
                $('#dd').dialog({
                    title: 'My Dialog',
                    width: 650,
                    height: 400,
                   
                }).dialog('setTitle', '新增用户').dialog("open");
                $("#frim1").attr("src","userAdd.html");

            })

            $(".update").click(function () {
                $('#dd').dialog({
                    title: 'My Dialog',
                    width: 650,
                    height: 400,

                }).dialog('setTitle', '修改用户').dialog("open");
                $("#frim1").attr("src", "userAlter.html");

            })
            $(".del").click(function () {
                $.extend($.messager.defaults, {
                    ok: "确定",
                    cancel: "取消"
                });
                $.messager.confirm('确定', '您确定要删除选中的信息吗？', function (r) {
                    if (r) {
                        alert('删除成功！');
                    }
                });
            })
        })
      
    </script>
</head>
<body>
    <div id="tb">
        <a id="btn" href="#" class="easyui-linkbutton add" data-options="iconCls:'icon-add'">新增</a>
        <a id="btn" href="#" class="easyui-linkbutton update" data-options="iconCls:'icon-edit'">修改</a>
        <a id="btn" href="#" class="easyui-linkbutton del" data-options="iconCls:'icon-remove'">删除</a><br /><br />
        登录名：<input id="txtLoginName" type="text" />真实姓名：<input id="txtName" type="text" />联系电话：<input id="txtTel" type="text" />
        <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a><br />
       
    </div>
    <table id="dg"></table>
    <div id="dd"  title="My Dialog"  style="width:400px;height:200px; margin:auto;text-align:center"
         data-options="iconCls:'icon-save',resizable:true,modal:true">
       <iframe id="frim1" scrolling="no" frameborder="0" width="99%" height="99%" style="margin:auto;text-align:center"></iframe>
    </div> 
</body>
</html>
